<ul class="box-list clear">
  <li>
    <div class='media-button icon-play'></div>
  </li>
  <li>
    <div class='media-button icon-pause'></div>
  </li>
  <li>
    <div class='media-button media-button-error icon-reload'></div>
  </li>
  <li>
    <div class="media-button media-button-progress-animation" data-uie-name="status-loading-media">
      <div class='media-button-border-fill'></div>
      <svg class="svg-theme" viewBox="0 0 32 32">
        <circle class="stroke-theme" r="50%" cx="50%" cy="50%"></circle>
      </svg>
    </div>
  </li>
</ul>
<ul class="box-list clear media-button-lg">
  <li>
    <div class='media-button icon-play'></div>
  </li>
  <li>
    <div class='media-button icon-pause'></div>
  </li>
  <li>
    <div class='media-button media-button-error icon-reload'></div>
  </li>
  <li>
    <div class="media-button media-button-progress-animation" data-uie-name="status-loading-media">
      <div class='media-button-border-fill'></div>
      <svg class="svg-theme" viewBox="0 0 64 64">
        <circle class="stroke-theme" r="50%" cx="50%" cy="50%"></circle>
      </svg>
    </div>
  </li>
</ul>
